<template>
    <div >
        <h3>{{ msg }}</h3>
        <h2>Student Edit</h2>
        <p >
            <router-link to="/" active-class="active">Back to home</router-link>
        </p>
        <table>
            <tr>
                <th>Id</th>
                <td>
                    <input type="text" :value="id" readonly>
                </td>
            </tr>
            <tr>
                <th>Name</th>
                <td>
                    <input type="text" v-model="name">
                </td>
            </tr>
            <tr>
                <th>gender</th>
                <td>
                    <input type="text" v-model="gender">
                </td>
            </tr>
            <tr>
                <th>Chinese</th>
                <td>
                    <input type="text" v-model="chinese">
                </td>
            </tr>
            <tr>
                <th>English</th>
                <td>
                    <input type="text" v-model="english">
                </td>
            </tr>
            <tr>
                <th>Math</th>
                <td>
                    <input type="text" v-model="math">
                </td>
            </tr>
        </table>
        <p>
            <button @click="btn_edit_studentinfo">edit to save</button>
        </p>
    </div>
</template>
<script>
export default {
  name: 'StudentEdit',
  data () {
    return {
      msg: 'welcome to student mangement system',
      id: '',
      name: '',
      gender: '',
      chinese: '',
      english: '',
      math: ''
    }
  },
  created:
        function () {
          this.id = this.$route.params.id
          let stuinfo = JSON.parse(localStorage.getItem('stu' + this.id))
          this.name = stuinfo.name
          this.gender = stuinfo.gender
          this.chinese = stuinfo.chinese
          this.math = stuinfo.math
          this.english = stuinfo.english
        },
  methods: {
    btn_edit_studentinfo: function () {
      let oStu = {
        id: this.id,
        name: this.name,
        gender: this.gender,
        chinese: this.chinese,
        english: this.english,
        math: this.math
      }
      var key = 'stu' + oStu.id
      var stu = JSON.stringify(oStu)
      localStorage.setItem(key, stu)
      this.$router.push({ path: '/info' })
    }
  }
}
</script>
